import React, { useState, useEffect } from "react";
import './css/message.css'
import { LeftOutline, CloseCircleOutline, RightOutline, MoreOutline } from 'antd-mobile-icons'
import { ImageUploader, Space, Card } from 'antd-mobile';
import { demoSrc, mockUpload } from '../../utils/utils'
import { useNavigate, Outlet } from 'react-router-dom'
const message = () => {
    const navigate = useNavigate()
    const LimitCount = () => {
        const maxCount = 3;
        const [fileList, setFileList] = useState([

        ]);
        return (
            <ImageUploader

                value={fileList}
                // onChange={setFileList}
                upload={mockUpload}
            />
        );
    };
    return (
        <>
            <div className="message_div">
                <div className="top_div1">
                    <div>
                        <LeftOutline onClick={() => navigate('/chen/layout/my')} className='message_left_icon' />
                        <span>账号资料</span>
                    </div>
                    {/* <div className="icon_div2">
                        <MoreOutline className="icon1" />
                        |
                        <CloseCircleOutline className="icon1" />
                    </div> */}
                </div>



                <div className="content_div1">
                    <div className="upload_div">
                        <Space direction='vertical' >
                            <LimitCount />
                        </Space>
                    </div>
                    <Card className="card_div2">
                        <Card
                            className="card"
                            // icon={}
                            title={<div style={{ fontWeight: 'normal' }}>
                                账号
                            </div>}
                            extra={<span>
                                158****1745
                            </span>}
                            style={{ borderRadius: '16px' }}
                        >
                        </Card>
                        <Card
                            className="card"
                            // icon={}
                            title={<div style={{ fontWeight: 'normal' }}>
                                昵称
                            </div>}
                            extra={<div>
                                <span>朱子健</span>
                                <RightOutline />
                            </div>
                            }
                            style={{ borderRadius: '16px' }}
                        >
                        </Card>
                        <Card
                            className="card"
                            // icon={}
                            title={<div style={{ fontWeight: 'normal' }}>
                                性别
                            </div>}
                            extra={<div>
                                <span>男</span>
                                <RightOutline />
                            </div>
                            }
                            style={{ borderRadius: '16px' }}
                        >
                        </Card>
                        <Card
                            className="card1"
                            // icon={}
                            title={<div style={{ fontWeight: 'normal' }}>
                                年龄
                            </div>}
                            extra={<div>
                                <span>18</span>
                                <RightOutline />
                            </div>
                            }
                            style={{ borderRadius: '16px' }}
                        >
                        </Card>
                    </Card>

                </div>
            </div>
        </>
    )
}
export default message